<template>
  <el-tag :type="type" :effect="effect" :round="round" v-if="!text && label">{{ label }}</el-tag>
  <div v-if="text" :class="['color-' + type]">{{ label }}</div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  value: {
    type: [String, Number, null, undefined],
    default: ''
  },
  // 列表项
  list: {
    type: Array,
    default: () => []
  },
  // 键字段名（显示的字样）
  labelField: {
    type: String,
    default: 'label'
  },
  // 值字段名（实际代表值）
  valueField: {
    type: String,
    default: 'value'
  },
  text: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'primary' // 'primary' | 'success' | 'info' | 'warning' | 'danger'
  },
  effect: {
    type: String,
    default: 'light' // 'dark' | 'light' | 'plain'
  },
  round: {
    type: Boolean,
    default: false
  }
})

const label = computed(() => {
  const { value, list, labelField, valueField } = props

  const findOne = list.find((item) => item[valueField] == value)
  let result = findOne && findOne[labelField]

  return result
})
</script>

<style lang="scss" scoped></style>
